<template>
  <div class="data-dashboard">
    <!-- 上部数据卡片区域 -->
    <div class="dashboard-section card-section">
      <!-- 欢迎标语 -->
      <div class="welcome-banner">
        <h2>欢迎回来！ <span class="username">admin</span></h2>
      </div>

      <!-- 数据卡片区域 -->
      <div class="data-cards">
        <a-row :gutter="16">
          <!-- 用户数卡片 -->
          <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <data-card 
              title="用户数"
              value="373.5"
              unit="W+"
              type="user"
              :show-trend="true"
            />
          </a-col>
          
          <!-- 图片数卡片 -->
          <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <data-card 
              title="图片数"
              value="368"
              unit="个"
              type="image"
            />
          </a-col>
          
          <!-- 空间数卡片 -->
          <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <data-card 
              title="空间数"
              value="8,874"
              unit="个"
              type="storage"
            />
          </a-col>
          
          <!-- 评论数卡片 -->
          <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <data-card 
              title="评论数"
              value="2.8"
              unit="%"
              type="comment"
              :show-trend="true"
            />
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="dashboard-main">
      <!-- 左侧内容区 -->
      <div class="dashboard-chart-area">
        <!-- 用户饼图和空间饼图放在同一行 -->
        <div class="pie-charts-row">
          <!-- 用户占比饼图 -->
          <a-card class="chart-card pie-chart-card">
            <template #title>
              <div class="chart-title">
                <span>用户占比</span>
                <a-link class="view-more">查看详情</a-link>
              </div>
            </template>
            <div class="chart-container pie-chart-container">
              <div ref="userChartRef" class="chart-instance"></div>
            </div>
          </a-card>
          
          <!-- 空间类型饼图 -->
          <a-card class="chart-card pie-chart-card">
            <template #title>
              <div class="chart-title">
                <span>空间类型分布</span>
                <a-link class="view-more">查看详情</a-link>
              </div>
            </template>
            <div class="chart-container pie-chart-container">
              <div ref="spaceChartRef" class="chart-instance"></div>
            </div>
          </a-card>
        </div>
        
        <!-- 图片分类柱状图 -->
        <a-card class="chart-card">
          <template #title>
            <div class="chart-title">
              <span>图片分类数据</span>
              <a-link class="view-more">查看详情</a-link>
            </div>
          </template>
          <div class="chart-container bar-chart-container">
            <div ref="imageChartRef" class="chart-instance"></div>
          </div>
        </a-card>
      </div>
      
      <!-- 右侧功能区 -->
      <div class="dashboard-sidebar">
        <!-- 工作站图片 -->
        <div class="workspace-image">
          <img src="https://img.freepik.com/free-photo/workspace-with-computer-accessories_23-2150316764.jpg" alt="工作站" />
        </div>
        
        <!-- 公告区域 -->
        <a-card class="sidebar-card announcement-card">
          <template #title>
            <div class="sidebar-title">
              <span>公告</span>
              <a-link class="view-more">查看更多</a-link>
            </div>
          </template>
          <div class="announcement-list">
            <div class="announcement-item">
              <div class="announcement-tag activity">活动</div>
              <div class="announcement-content">内容最新优惠活动</div>
            </div>
            <div class="announcement-item">
              <div class="announcement-tag message">消息</div>
              <div class="announcement-content">新增内容尚未通过审核，详情请...</div>
            </div>
            <div class="announcement-item">
              <div class="announcement-tag notice">通知</div>
              <div class="announcement-content">当前产品试用期即将结束，如需...</div>
            </div>
            <div class="announcement-item">
              <div class="announcement-tag notice">通知</div>
              <div class="announcement-content">1月新系统升级计划通知</div>
            </div>
            <div class="announcement-item">
              <div class="announcement-tag message">消息</div>
              <div class="announcement-content">新增内容已经通过审核，详情请...</div>
            </div>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 已安装echarts
import * as echarts from 'echarts';
import DataCard from '../components/DataCard.vue';

// 图表引用
const userChartRef = ref<HTMLElement | null>(null);
const imageChartRef = ref<HTMLElement | null>(null);
const spaceChartRef = ref<HTMLElement | null>(null);

// 初始化图表
const initCharts = () => {
  if (!userChartRef.value || !imageChartRef.value || !spaceChartRef.value) return;
  
  const userChart = echarts.init(userChartRef.value);
  const imageChart = echarts.init(imageChartRef.value);
  const spaceChart = echarts.init(spaceChartRef.value);
  
  const userChartOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      bottom: 'bottom',
      data: ['VIP用户', '普通用户']
    },
    series: [
      {
        name: '用户占比',
        type: 'pie',
        radius: '65%',
        center: ['50%', '45%'],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {d}%',
          fontSize: 12,
          position: 'outside',
          alignTo: 'labelLine',
          edgeDistance: '10%',
          distanceToLabelLine: 5
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 10,
          smooth: true
        },
        data: [
          { value: 128500, name: 'VIP用户', itemStyle: { color: '#4080ff' } },
          { value: 245000, name: '普通用户', itemStyle: { color: '#a855f7' } }
        ]
      }
    ]
  };
  
  const imageChartOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      show: true,
      bottom: 'bottom',
      data: ['图片数量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['自然风光', '城市建筑', '人物肖像', '动物世界', '美食佳肴', '旅行探险', '科技数码', '艺术设计', '体育运动'],
      axisLabel: {
        color: '#86909c',
        interval: 0,
        rotate: 0,
        margin: 14
      },
      axisLine: {
        lineStyle: {
          color: '#e5e6eb'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '图片数量',
      nameTextStyle: {
        color: '#86909c'
      },
      axisLabel: {
        formatter: '{value}k',
        color: '#86909c'
      },
      splitLine: {
        lineStyle: {
          color: '#f2f3f5'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '图片数量',
        type: 'bar',
        barWidth: '60%',
        itemStyle: {
          color: function(params: any) {
            const colorList = [
              '#67C23A',
              '#5E7CE0',
              '#FF9A2E',
              '#B88230',
              '#F56C6C',
              '#7B61FF',
              '#18BBF7',
              '#E143FF',
              '#E6A23C'
            ];
            return colorList[params.dataIndex];
          },
          borderRadius: [5, 5, 0, 0]
        },
        data: [88, 72, 62, 56, 52, 48, 44, 40, 36]
      }
    ]
  };
  
  const spaceChartOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      bottom: 'bottom',
      data: ['普通空间', '旗舰空间', '企业空间']
    },
    series: [
      {
        name: '空间类型分布',
        type: 'pie',
        radius: '65%',
        center: ['50%', '45%'],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {d}%',
          fontSize: 12,
          position: 'outside',
          alignTo: 'labelLine',
          edgeDistance: '10%',
          distanceToLabelLine: 5
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 10,
          smooth: true
        },
        data: [
          { value: 6500, name: '普通空间', itemStyle: { color: '#ff7d00' } },
          { value: 1800, name: '旗舰空间', itemStyle: { color: '#14c9c9' } },
          { value: 580, name: '企业空间', itemStyle: { color: '#4080ff' } }
        ]
      }
    ]
  };
  
  userChart.setOption(userChartOption);
  imageChart.setOption(imageChartOption);
  spaceChart.setOption(spaceChartOption);
  
  // 响应式处理
  window.addEventListener('resize', () => {
    userChart?.resize();
    imageChart?.resize();
    spaceChart?.resize();
  });
};

onMounted(() => {
  initCharts();
});
</script>

<style scoped>
.data-dashboard {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  overflow: visible;
  /* max-height: calc(100vh - 60px - 32px); 已不需要 */
}

.dashboard-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.welcome-banner {
  margin-bottom: 24px;
}

.welcome-banner h2 {
  font-size: 22px;
  font-weight: 500;
  color: #1d2129;
  margin: 0;
}

.welcome-banner .username {
  font-weight: 600;
}

.data-cards {
  width: 100%;
}

/* 主要内容区布局 */
.dashboard-main {
  display: flex;
  gap: 16px;
  min-height: 600px; /* 设置最小高度确保内容区有足够空间 */
}

.dashboard-chart-area {
  flex: 1;
  min-width: 0;
}

.dashboard-sidebar {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 图表样式 */
.chart-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.view-more, .manage-link {
  font-size: 14px;
  font-weight: normal;
  color: #4080ff;
}

.chart-card {
  margin-bottom: 16px;
}

.pie-charts-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.pie-chart-card {
  flex: 1;
  min-width: 0;
}

.pie-chart-container {
  height: 280px;
  width: 100%;
}

.bar-chart-container {
  height: 350px;
  width: 100%;
}

.chart-instance {
  width: 100%;
  height: 100%;
}

/* 侧边栏卡片样式 */
.sidebar-card {
  width: 100%;
}

.sidebar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

/* 快捷操作样式 */
.quick-actions, .recent-visits {
  padding: 8px 0;
}

.action-row {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 20px;
}

.action-row:last-child {
  margin-bottom: 0;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.action-icon {
  font-size: 20px;
  color: #4080ff;
  margin-bottom: 8px;
  background: #edf2ff;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-name {
  font-size: 12px;
  color: #4e5969;
}

/* 工作站图片样式 */
.workspace-image {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: 8px;
}

.workspace-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 公告样式 */
.announcement-card {
  margin-top: 12px;
}

.announcement-list {
  padding: 0;
}

.announcement-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f2f3f5;
}

.announcement-item:last-child {
  border-bottom: none;
}

.announcement-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 10px;
  color: white;
  flex-shrink: 0;
}

.announcement-tag.activity {
  background-color: #ff7d00;
}

.announcement-tag.message {
  background-color: #00b2a9;
}

.announcement-tag.notice {
  background-color: #4080ff;
}

.announcement-content {
  font-size: 14px;
  color: #1d2129;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .dashboard-main {
    flex-direction: column;
  }
  
  .dashboard-sidebar {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .pie-charts-row {
    flex-direction: column;
  }
  
  .pie-chart-card {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .action-row {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
  }

  .pie-chart-container,
  .line-chart-container {
    height: 300px;
  }
}
</style> 